<template>
  <div>
    <div class="user-buy">
      <!-- header -->
      <mt-navbar v-model="selected">
        <mt-tab-item 
          :id="k"
          v-for="(v, k) in tabMenu"
          :key="k"
          @click.native="changeSelect(k)"
        >
          {{v}}
        </mt-tab-item>
      </mt-navbar>

      <!-- 内容 -->
      <mt-tab-container v-model="selected">
        <!-- 出售中 -->
        <mt-tab-container-item id="1">
          <div class="buy-card"
            v-for="v in sellList" :key="v.goods_id"
            @click="$router.push({name: 'GoodsDetail', params: {id: v.goods_id}})"
          >
            <div class="content">
              <img :src="v.image">
              <div class="text">
                <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                <p class="desc">上架时间：{{v.up_time}}</p>
                <p class="desc">价格：<span class="red">¥ {{v.buy_price}}</span></p>
              </div>
            </div>
            <div class="footer">
              <span class="hint">预计于{{v.show_time}}前售出回款</span>
              <div class="button">
                <span></span>
                <mt-button class="confirm" @click.native.stop="showDispute(v.goods_id)">我要下架</mt-button>
              </div>
            </div>
          </div>
        </mt-tab-container-item>
        <!-- 已下架 -->
        <mt-tab-container-item id="2">
          <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded2" :autoFill="autoFill" ref="loadmore2">
            <div class="buy-card"
              v-for="v in offShelfList" :key="v.goods_id"
              @click="$router.push({name: 'GoodsDetail', params: {id: v.goods_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">下架时间：{{v.del_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.buy_price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint">下架原因：{{v.text}}</span>
                <img src="/src/assets/icons/off-shelf-goods.png" class="complete-img">
              </div>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
        <!-- 已出售 -->
        <mt-tab-container-item id="3">
          <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded3" :autoFill="autoFill" ref="loadmore3">
            <div class="buy-card"
              v-for="v in finishList" :key="v.id"
              @click="$router.push({name: 'SellOrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">售出时间：{{v.finish_time}}</p>
                  <p class="desc">价格：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span class="hint">成功于上架{{v.days}}天内售出</span>
                <img src="/src/assets/icons/complete-sell-goods.png" class="complete-img">
              </div>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
        <!-- 纠纷中 -->
        <mt-tab-container-item id="4">
          <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded4" :autoFill="autoFill" ref="loadmore4">
            <div class="buy-card"
              v-for="v in disputeList" :key="v.id"
              @click="$router.push({name: 'SellOrderDetail', params: {id: v.order_detail_id}})"
            >
              <div class="content">
                <img :src="v.image">
                <div class="text">
                  <p class="name">{{v.name}}-{{v.suffix_name}}</p>
                  <p class="desc">时间：{{v.dispute_time}}</p>
                  <p class="desc">纠纷金额：<span class="red">¥{{v.price}}</span></p>
                </div>
              </div>
              <div class="footer">
                <span></span>
                <img :src="`/src/assets/icons/${Number(v.status) === 3 ? 'handle' : 'complete'}-goods.png`" class="complete-img">
              </div>
            </div>
          </mt-loadmore>
        </mt-tab-container-item>
      </mt-tab-container>
      <!-- 下架原因反馈 -->
      <mt-popup v-model="disputePopup" position="middle">
        <div class="off-shelf-reason">
          <div class="title">下架原因，反馈给平台客服</div>
          <div class="radio-item" @click="disputeCheck(1, '串码有误')">
            <span>串码有误</span>
            <img :src="`/src/assets/user-center/circle${this.reasonCheck === 1 ? '-full' : ''}.png`">
          </div>
          <div class="radio-item" @click="disputeCheck(2, '我已使用')">
            <span>我已使用</span>
            <img :src="`/src/assets/user-center/circle${this.reasonCheck === 2 ? '-full' : ''}.png`">
          </div>
          <div class="radio-item" @click="disputeCheck(3, '准备自用')">
            <span>准备自用</span>
            <img :src="`/src/assets/user-center/circle${this.reasonCheck === 3 ? '-full' : ''}.png`">
          </div>
          <mt-field label="其他" placeholder="请输入下架原因" v-model="reasonInput"></mt-field>
          <div class="button-group">
            <mt-button class="cancel" @click.native="closeDispute">取消</mt-button>
            <mt-button class="confirm" @click.native="offShelf">确认</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import {MessageBox, Toast} from 'Mint-ui'

  export default {
    name: 'Sell',
    data () {
      return {
        selected: 3,
        tabMenu: {1: '出售中', 2: '已下架', 3: '已出售', 4: '纠纷中'},
        sellList: [],
        offShelfList: [],
        finishList: [],
        disputeList: [],
        // 分页
        allLoaded2: false,
        allLoaded3: false,
        allLoaded4: false,
        autoFill: false,
        page2: 1,
        page3: 1,
        page4: 1,
        limit: 10,
        // 下架
        goodsId: 0,
        reason: '',
        reasonInput: '',
        reasonCheck: 0,
        disputePopup: false
      }
    },
    methods: {
      changeSelect (v) {
        this.$router.replace({name: 'Sell', params: {tab: v}, query: this.$route.query})
        switch (Number(v)) {
          case 1:
            this.getSellList()
            break
          case 2:
            this.page2 = 1
            this.offShelfList = []
            this.allLoaded2 = false
            this.getOffShelfList()
            break
          case 3:
            this.page3 = 1
            this.finishList = []
            this.allLoaded3 = false
            this.getFinishList()
            break
          case 4:
            this.page4 = 1
            this.disputeList = []
            this.allLoaded4 = false
            this.getDisputeList()
            break
        }
      },
      getSellList () {
        let params = {page: 1, limit: 100}
        this.$post('/vue/goods/my_list', params).then(data => {
          this.sellList = data.goods_list
        })
      },
      getOffShelfList () {
        let params = {page: this.page2, limit: this.limit}
        this.$post('/vue/goods/my_stop_sell_list', params).then(data => {
          if (data.length > 0) {
            this.offShelfList = this.offShelfList.concat(data)
          } else {
            this.page2--
            this.allLoaded2 = true
          }
        })
      },
      getFinishList () {
        let params = {page: this.page3, limit: this.limit, character: 'seller'}
        this.$post('/vue/order/finish_list', params).then(data => {
          if (data.order_list.length > 0) {
            this.finishList = this.finishList.concat(data.order_list)
          } else {
            this.page3--
            this.allLoaded3 = true
          }
        })
      },
      getDisputeList () {
        let params = {page: this.page4, limit: this.limit, character: 'seller'}
        this.$post('/vue/order/dispute_list', params).then(data => {
          if (data.order_list.length > 0) {
            this.disputeList = this.disputeList.concat(data.order_list)
          } else {
            this.page4--
            this.allLoaded4 = true
          }
        })
      },
      loadBottom () {
        let field = this.$route.params.tab
        setTimeout(() => {
          switch (Number(field)) {
            case 2:
              this.page2++
              this.getOffShelfList()
              this.$refs.loadmore2.onBottomLoaded()
              break
            case 3:
              this.page3++
              this.getFinishList()
              this.$refs.loadmore3.onBottomLoaded()
              break
            case 4:
              this.page4++
              this.getDisputeList()
              this.$refs.loadmore4.onBottomLoaded()
              break
          }
        }, 1500)
      },
      // 下架商品
      offShelf () {
        let params = {
          id: this.goodsId,
          alter_status: 'stop_sell',
          reason: `${this.reason}~${this.reasonInput}`
        }
        if (params.reason === '~') {
          msg('请选择或者填写纠纷原因')
          return false
        }
        this.closeDispute()
        this.$post('/vue/goods/seller_feedback', params).then(data => {
          this.$post('/vue/goods/status_alter', params).then(data => {
            MessageBox.alert('券码已下架', '温馨提示').then(action => {
              if (action === 'confirm') {
                for (let i = 0; i < this.sellList.length; i++) {
                  if (this.sellList[i].goods_id === this.goodsId) {
                    this.sellList.splice(i, 1)
                  }
                }
              }
            })
          })
        })
      },
      showDispute (id) {
        this.goodsId = id
        MessageBox.confirm('确定要下架吗？下架后不可再次上传。', '温馨提示').then(action => {
          if (action === 'confirm') {
            this.disputePopup = true
          }
        })
      },
      closeDispute () {
        this.disputePopup = false
        this.reason = ''
        this.reasonCheck = 0
        this.reasonInput = ''
      },
      disputeCheck (check, reason) {
        this.reasonCheck = check
        this.reason = reason
      }
    },
    mounted () {
      this.selected = this.$route.params.tab.toString()
      switch (Number(this.selected)) {
        case 1:
          this.getSellList()
          break
        case 2:
          this.getOffShelfList()
          break
        case 3:
          this.getFinishList()
          break
        case 4:
          this.getDisputeList()
          break
      }
    }
  }
  const msg = m => {
    Toast({
      message: m,
      position: 'middle',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-dark-red: rgb(217, 117, 99);
  @c-light-blue: rgb(242, 247, 250);
  @c-blue: rgb(108, 184, 222);

  .user-buy {
    background-color: #FFF;
    height: calc(~'100vh - 58px');
    overflow-x: hidden;
    overflow: scroll;
    .mint-navbar {
      border-bottom: 1px solid @c-226;
      .mint-tab-item {
        padding: 11.5px 0;
        color: @c-169; 
        &.is-selected {
          border-bottom: 1px solid @c-blue;
          color: @c-blue;
          margin-bottom: -1px;
        }
        .mint-tab-item-label {
          font-size: 13px;
          line-height: 24px;
        }
      }
    }
    .buy-card {
      margin: 0 12px 12px;
      padding: 8px;
      background-color: @c-light-blue;
      text-align: left;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
      &:first-child {
        margin-top: 12px;
      }
      .content {
        border-bottom: 1px solid @c-226;
        padding-bottom: 8px;
        display: flex;
        justify-content: space-between;
        img {
          flex: 0 0 auto;
          width: 72px;
          height: 72px;
        }
        .text {
          flex: 1;
          margin-left: 8px;
          p {
            font-size: 12px;
            line-height: 24px;
            color: @c-169;
            &.name {
              font-size: 13px;
              font-weight: bold;
              color: @c-124;
            }
            .red {
              font-size: 13px;
              color: @c-red;
            }
          }
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        .hint {
          padding-top: 8px;
          flex: 1;
          display: block;
          font-size: 12px;
          line-height: 24px;
          color: @c-dark-red;
        }
        .button {
          padding-top: 4px;
          margin-bottom: -4px;
          flex: 1;
          display: flex;
          justify-content: space-between;
          .mint-button {
            flex: 0 0 auto;
            width: 80px;
            height: 32px;
            padding: 0;
            margin: 0;
            &.cancel {
              border: 0;
              box-shadow: none;
              background-color: transparent;
              &::after {
                display: none;
              }
            }
            &.confirm {
              border-radius: 16px;
              background-color: @c-blue;
              
              
              box-sizing: border-box;
              .mint-button-text {
                color: #FFF;
              }
            }
            .mint-button-text {
              font-size: 13px;
              line-height: 24px;
              color: @c-169;
              display: block;
            }
          }
        }
        .qrcode {
          padding-top: 8px;
          flex: 0 0 auto;
          width: 24px;
          height: 24px;
        }
        .complete-img {
          flex: 0 0 auto;
          width: 72px;
          height: 72px;
          margin: -32px -8px -8px 0;
        }
      }
    }
    .mint-loadmore-text {
      color: @c-169;
    }
    .mint-popup {
      width: auto;
      height: auto;
      padding: 15px;
      border-radius: 12px;
      background-color: #ebebeb;
      overflow-x: hidden;
      overflow-y: scroll;
      .picture {
        width: 80vw;
        height: 90%;
      }
      .off-shelf-reason {
        width: 64vw;
        img {
          width: 100px;
          height: 100px;
        }
        .title {
          font-size: 17px;
          font-weight: 600;
          line-height: 24px;
          color: #333;
          margin-bottom: 15px;
        }
        .radio-item {
          display: flex;
          align-items: center;
          align-content: center;
          justify-content: space-between;
          font-size: 12px;
          line-height: 28px;
          color: @c-124;
          span {
            flex: 0 0 auto;
          }
          img {
            flex: 0 0 auto;
            padding: 4px;
            width: 18px;
            height: 18px;
          }
        }
        .mint-field {
          min-height: 0;
          height: 28px;
          background-color: #ebebeb;
          .mint-cell-wrapper {
            padding: 0;
            line-height: 0;
            background-image: none;
            .mint-cell-title {
              font-size: 12px;
              line-height: 24px;
              color: @c-124;
              text-align: left;
              width: 48px;
            }
            .mint-cell-value {
              border-bottom: 1px solid rgba(53, 53, 53, 0.25);
              .mint-field-core {
                font-size: 12px;
                background-color: transparent;
                &::-webkit-input-placeholder {
                  color: @c-169;
                }
              }
            }
          }
        }
        .button-group {
          display: flex;
          justify-content: space-between;
          margin: 15px -15px -15px;
          border-top: 1px solid rgba(53, 53, 53, 0.25);
          button {
            width: 50%;
            margin: 0;
            padding: 0;
            flex: 0 0 auto;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            font-size: 16px;
            line-height: 24px;
            &.cancel {
              color: rgb(51, 51, 51);
              background-color: transparent;
            }
            &.confirm {
              color: rgb(0, 122, 255);
              background-color: transparent;
            }
          }
          .mint-button:not(.is-disabled):active::after {
            opacity: 0;
          }
        }
      }
    }
  }
  .pop-in-toast, .mint-toast {
    z-index: 2500;
  }
  .mint-indicator-wrapper {
    z-index: 2500;
  }
</style>